<template>
  <div class="form_wrap">
    <div style="font-size: 20px; font-weight: bold">群发消息次数限制配置</div>
    <el-form
      v-loading="loading"
      element-loading-text="加载中..."
      ref="ruleFormRef"
      @submit="submitForm"
      :rules="rules"
      :model="model"
      style="padding: 20px"
    >
      <el-form-item label="群发消息最高次数" prop="times">
        <el-input-number
          style="width: 270px"
          v-model="model.times"
          placeholder="请输入群发消息最高次数，不输不限制"
          :controls="false"
          :min="1"
          :max="99999"
          :precision="0"
        >
        </el-input-number>
        <span style="margin-left: 10px"> 次 / 月 </span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="btnLoading" native-type="submit"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { basicConfigService } from '@/api/basicConfig'
import type { FormInstance } from 'element-plus'
const loading = ref(false)
const btnLoading = ref(false)
const rules = reactive({
  // times: [{ required: true, message: '请输入', trigger: 'change' }],
})
const model = ref({ times: ref<number>(), id: '' })
const ruleFormRef = ref<FormInstance>()
const submitForm = (e) => {
  e.preventDefault()
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      btnLoading.value = true
      basicConfigService
        .configEdit({
          data: {
            id: model.value.id,
            number: model.value.times || '',
          },
        })
        .then(() => {
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          getConfigInfo()
          btnLoading.value = false
        })
        .catch(() => {
          btnLoading.value = false
        })
    }
  })
}
const getConfigInfo = () => {
  loading.value = true
  basicConfigService
    .getConfigInfo({ data: {} })
    .then((res) => {
      model.value.times = res.data.number
      model.value.id = res.data.id
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
onMounted(() => {
  getConfigInfo()
})
</script>

<style lang="less" scoped>
.form_wrap {
  background: #fff;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}
</style>
